import { test, expect } from "@playwright/test";
import { DEFAULT_FUNCTION } from "~/utils/constants";

test("should show the function detail page", async ({ page }) => {
  await page.goto("/observability/functions/extract_entities");
  await expect(page.getByRole("heading", { name: "Variants" })).toBeVisible();

  // Assert that "error" is not in the page
  await expect(page.getByText("error", { exact: false })).not.toBeVisible();
});

test("should show description of chat function", async ({ page }) => {
  await page.goto("/observability/functions/write_haiku");
  await expect(page.getByRole("heading", { name: "Variants" })).toBeVisible();
  await expect(
    page.getByText("Generate a haiku about a given topic"),
  ).toBeVisible();

  // Assert that "error" is not in the page
  await expect(page.getByText("error", { exact: false })).not.toBeVisible();
});

test("should show description of json function", async ({ page }) => {
  await page.goto("/observability/functions/extract_entities");
  await expect(page.getByRole("heading", { name: "Variants" })).toBeVisible();
  await expect(
    page.getByText("Extract named entities from text"),
  ).toBeVisible();

  // Assert that "error" is not in the page
  await expect(page.getByText("error", { exact: false })).not.toBeVisible();
});

test("should show the function detail page for default function", async ({
  page,
}) => {
  await page.goto(`/observability/functions/${DEFAULT_FUNCTION}`);

  await expect(page.getByRole("heading", { name: "Variants" })).toBeVisible();

  // Assert that "error" is not in the page
  await expect(page.getByText("error", { exact: false })).not.toBeVisible();
});

const toolSearchWikipedia = {
  name: "search_wikipedia",
  description:
    "Search Wikipedia for pages that match the query. Returns a list of page titles.",
};

test("should open drawer when tool name is clicked", async ({ page }) => {
  await page.goto("/observability/functions/multi_hop_rag_agent");

  // ensure the drawer is not open by default
  const drawer = await page.getByRole("dialog");
  await expect(drawer).not.toBeVisible();

  // open the drawer
  const toolButton = await page.getByText(toolSearchWikipedia.name);
  await toolButton.click();
  await expect(drawer).toBeVisible();

  // ensure that the drawer shows the correct description
  const desc = await page.getByText(toolSearchWikipedia.description);
  await expect(desc.first()).toBeVisible();
});

test("should display user schema for write_haiku function", async ({
  page,
}) => {
  await page.goto("/observability/functions/write_haiku");

  // Wait for the Schemas section to be visible
  await expect(page.getByRole("heading", { name: "Schemas" })).toBeVisible();

  // Check that the user schema tab is visible
  await expect(page.getByRole("tab", { name: /user/ })).toBeVisible();

  // The user schema should be selected by default (first tab)
  // Check that the schema content contains "topic" field (appears multiple times, so use first())
  await expect(page.getByText('"topic"').first()).toBeVisible();

  // Verify the schema structure contains properties section
  await expect(page.getByText('"properties"')).toBeVisible();
});

test("should display output schema for extract_entities function", async ({
  page,
}) => {
  await page.goto("/observability/functions/extract_entities");

  // Wait for the Schemas section to be visible
  await expect(page.getByRole("heading", { name: "Schemas" })).toBeVisible();

  // Check that the output schema tab is visible
  await expect(page.getByRole("tab", { name: /output/ })).toBeVisible();

  // The output schema should be selected by default (first tab)
  // Check that the schema content contains unique fields from extract_entities
  // These fields appear multiple times (properties and required), so use first()
  await expect(page.getByText('"person"').first()).toBeVisible();
  await expect(page.getByText('"organization"').first()).toBeVisible();
  await expect(page.getByText('"location"').first()).toBeVisible();
  await expect(page.getByText('"miscellaneous"').first()).toBeVisible();
});

test("should not show experimentation section for default function", async ({
  page,
}) => {
  await page.goto(`/observability/functions/${DEFAULT_FUNCTION}`);

  // Wait for the Variants section to be visible
  await expect(page.getByRole("heading", { name: "Variants" })).toBeVisible();

  // Ensure the Experimentation section is not present
  await expect(
    page.getByRole("heading", { name: "Experimentation" }),
  ).not.toBeVisible();

  // Assert that "error" is not in the page
  await expect(page.getByText("error", { exact: false })).not.toBeVisible();
});

test("should show experimentation section with pie chart for write_haiku function", async ({
  page,
}) => {
  await page.goto("/observability/functions/write_haiku");

  // Wait for the Experimentation section to be visible
  await expect(
    page.getByRole("heading", { name: "Experimentation" }),
  ).toBeVisible();

  // Check that the pie chart card is visible
  await expect(page.getByText("Variant Weights")).toBeVisible();
  await expect(
    page.getByText("This chart displays the current sampling probabilities"),
  ).toBeVisible();

  // Check that all three variants are shown with 33.3% weight
  // The pie chart should display percentages on the chart (use first since there are 3 instances)
  await expect(page.getByText("33.3%").first()).toBeVisible();

  // Check that the legend contains all three variant names
  // Just verify they exist on the page - they appear in multiple places
  await expect(
    page.getByText("initial_prompt_gpt4o_mini").first(),
  ).toBeVisible();
  await expect(
    page.getByText("initial_prompt_haiku_3_5").first(),
  ).toBeVisible();
  await expect(page.getByText("better_prompt_haiku_3_5").first()).toBeVisible();

  // Assert that "error" is not in the page
  await expect(page.getByText("error", { exact: false })).not.toBeVisible();
});

test("should display feedback timeseries charts for extract_entities function", async ({
  page,
}) => {
  await page.goto("/observability/functions/extract_entities");

  // Wait for the Experimentation section to be visible
  await expect(
    page.getByRole("heading", { name: "Experimentation" }),
  ).toBeVisible();

  // Check that the Mean Estimated Performance tab is visible and click it
  await expect(
    page.getByRole("tab", { name: "Estimated Performance" }),
  ).toBeVisible();
  await page.getByRole("tab", { name: "Estimated Performance" }).click();

  // Verify the Estimated Performance chart is displayed
  await expect(page.getByText(/Estimated Performance:/)).toBeVisible();

  // Check that the metric name appears in the description
  await expect(page.getByText(/jaro_winkler_similarity/)).toBeVisible();

  // Verify the chart is rendered
  const charts = page.locator("[data-chart]");
  await expect(charts.first()).toBeVisible();

  // Switch to Feedback Count tab
  await page.getByRole("tab", { name: "Feedback Count" }).click();

  // Verify the Feedback Count chart is displayed
  await expect(page.getByText(/Cumulative Feedback Count:/)).toBeVisible();

  // Check that the metric name appears in the description
  await expect(page.getByText(/jaro_winkler_similarity/).first()).toBeVisible();

  // Verify the chart is rendered (still checking for chart presence)
  await expect(charts.first()).toBeVisible();

  // Assert that "error" is not in the page
  await expect(page.getByText("error", { exact: false })).not.toBeVisible();
});
